<template>
  <div>
    <dtDialog
      :title="modalTitle"
      :visible.sync="dialogVisible"
      :lock-scroll="false"
      :append-to-body="true"
      :is-loading="loading"
      @closeDialog="onModalClosed"
      @comfirmBtn="onSubmit()"
    >
      <el-form
        ref="form"
        slot="content"
        label-width="130px"
        :model="form"
        :rules="rules"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="设备品牌" prop="equipmentName">
              <el-input
                v-model.trim="form.equipmentName"
                maxlength="10"
                placeholder="请输入设备品牌"
                show-word-limit
                class="limit"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="设备型号" prop="equipmentModel">
              <el-input
                v-model.trim="form.equipmentModel"
                maxlength="30"
                placeholder="请输入设备型号"
                show-word-limit
                class="limit"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="视频处理CLASS" prop="jarId">
              <div style="width: 100%; display: flex; justify-content: space-between;">
                <el-select v-model.trim="form.jarId" placeholder="请选择" style="flex: 1;margin-right: 5px">
                  <el-option
                    v-for="jar in jarList"
                    :key="jar.id"
                    :label="jar.jarClass"
                    :value="jar.id"
                  ></el-option>
                </el-select>
                <el-button type="primary" @click="openUpload">上传jar</el-button>
                <el-button type="primary" @click="download">下载jar</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </dtDialog>
    <dtDialog
      title="上传jar包"
      :visible.sync="uploadDialogVisible"
      :lock-scroll="false"
      :append-to-body="true"
      :is-loading="uploadLoading"
      @closeDialog="onUploadModalClosed"
      @comfirmBtn="onUploadSubmit()"
    >
      <DtFileUpload
        ref="fileUploadRef"
        v-model="fileList"
        :file-type="fileType"
        :fileLimit="1"
        :fileSize="200"
      />
    </dtDialog>
  </div>
</template>

<script>
import { addEquipment, analysisJar, getJarClass, editEquipment } from '@/api/videoFusion/brandMaintenance'
import { cloud } from '@/framework/utils/request'
import { getToken } from '@/framework/utils/auth'

export default {
  data() {
    return {
      modalTitle: '',
      dialogVisible: false,
      buttonLoading: false,
      loading: false,
      uploadDialogVisible: false,
      uploadLoading: false,
      formType: '',
      form: {
        equipmentName: '',
        equipmentModel: '',
        jarId: ''
      },
      rules: {
        equipmentName: [{ required: true, message: '请输入设备品牌', trigger: ['blur'] }],
        equipmentModel: [{ required: true, message: '请输入设备型号', trigger: ['blur'] }],
        jarId: [{ required: true, message: '请选择视频处理CLASS', trigger: ['blur', 'change'] }]
      },
      fileList: [],
      fileType: ['jar'],
      jarList: []
    }
  },
  mounted() {
    this.getClassList()
  },
  methods: {
    download() {
      // if (this.form.jarId) {
      const hasToken = getToken()
      const jarUrl = `${process.env.VUE_APP_BASE_API + cloud.file}/sysFileInfo/publicDownload?fileId=1760594487182213121&token=${hasToken}`
      window.location.href = jarUrl
      // } else {
      //   this.$dtModal.msgWarning('请选择jar包')
      // }
    },
    getClassList() {
      getJarClass().then((res) => {
        this.jarList = res.data
      })
    },
    add() {
      this.formType = 'add'
      this.modalTitle = '新增设备品牌信息'
      this.dialogVisible = true
    },
    edit(row) {
      const { jarId, equipmentName, equipmentModel, id } = row
      this.formType = 'edit'
      this.modalTitle = '修改设备品牌信息'
      this.form = {
        equipmentName,
        equipmentModel,
        jarId,
        id,
        ids: [id]
      }
      this.dialogVisible = true
    },
    onModalClosed() {
      this.initModal()
      this.buttonLoading = false
    },
    onUploadModalClosed() {
      this.fileList = []
    },
    onUploadSubmit() {
      if (!this.fileList.length) {
        this.$dtModal.msgWarning('请选择jar文件')
        return
      }
      this.uploadLoading = true
      analysisJar({ fileId: this.fileList[0].id }).then(() => {
        this.uploadDialogVisible = false
        this.uploadLoading = false
        this.getClassList()
      }).catch(() => {
        this.uploadLoading = false
      })
    },
    onSubmit() {
      this.$refs.form.validate((result, message) => {
        if (result) {
          this.loading = true
          if (this.buttonLoading) {
            return
          }
          if (this.formType === 'add') {
            this.buttonLoading = true
            addEquipment(this.form).then((res) => {
              this.$dtModal.msgSuccess(res.message)
              this.dialogVisible = false
              this.$emit('success')
            }).finally(() => {
              this.loading = false
              this.buttonLoading = false
            })
          } else {
            this.buttonLoading = true
            editEquipment(this.form).then((res) => {
              this.$dtModal.msgSuccess(res.message)
              this.dialogVisible = false
              this.$emit('success')
            }).finally(() => {
              this.loading = false
              this.buttonLoading = false
            })
          }
        }
      })
    },
    openUpload() {
      this.uploadDialogVisible = true
    },
    initModal() {
      this.$refs.form.resetFields()
      this.form = {
        equipmentName: '',
        equipmentModel: '',
        jarId: ''
      }
      this.formType = ''
      this.fileList = []
    }
  }
}
</script>

<style>
</style>
